<template>
  <div class="agentRegister">
    <el-steps :active="active" align-center>
      <el-step title="注册账号" description=""></el-step>
      <el-step title="完善信息" description=""></el-step>
      <el-step title="完成" description=""></el-step>
    </el-steps>
    
    <el-form :model="firstForm" :rules="firstFormRules" ref="firstFormRef" class="firstForm" v-if="active == 1">
      <el-form-item prop="phone" class="code">
        <el-input placeholder="请输入手机号" v-model="firstForm.phone"></el-input>
        <el-button class="code_btns"  type="text" @click="getVCode('firstFormRef')" :disabled="btnIsDisabled">{{VCodeText}}</el-button>
      </el-form-item>
      <el-form-item prop="code" >
        <!-- <el-input placeholder="请输入验证码" v-model="firstForm.code" class="code_input" ></el-input> -->
        <sixCaptchaInput ref="sixCaptchaInput" :code.sync="firstForm.code" @updateCode='updateCode' />
      </el-form-item>
      <el-form-item prop="name">
        <el-input placeholder="请输入姓名" v-model="firstForm.name"></el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input placeholder="请输入邮箱" v-model="firstForm.email"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="请输入密码" :type="pwdType" v-model="firstForm.password"></el-input>
      </el-form-item>
      <el-form-item prop="confirmPwd">
        <el-input placeholder="请确认密码" :type="pwdType" v-model="firstForm.confirmPwd"></el-input>
      </el-form-item>
      <el-form-item prop="invitation_code">
        <el-input placeholder="请输入邀请码" v-model="firstForm.invitation_code" :disabled="has_code"></el-input>
      </el-form-item>
      <el-form-item prop="nickname">
        <el-input placeholder="请输入昵称" v-model="firstForm.nickname "></el-input>
      </el-form-item>

    </el-form>

    <el-form :model="twoForm" :rules="twoFormRules" ref="twoFormRef" class="twoForm" v-else-if="active == 2">
      <el-form-item prop="work_limit">
        <el-select v-model="twoForm.work_limit" placeholder="请选择从业年限">
          <el-option
            v-for="item in 50"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="experience">
        <el-select
          v-model="twoForm.experience"
          placeholder="请选择是否有从业经验"
          @change="changeSelect" >
          <el-option label="有" value="有"></el-option>
          <el-option label="无" value="无"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="describe" v-if="twoForm.experience == '有'" >
        <el-input autocomplete="off" v-model="twoForm.describe" placeholder="请输入从业经验描述"></el-input>
      </el-form-item>
      <el-form-item prop="territory" >
        <el-select v-model="twoForm.territory" multiple placeholder="请选择您的擅长领域" filterable>
          <el-option
            v-for="(item, index) in territory_options"
            :key="index"
            :value="item.label"
            :label="item.label" >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="organization" >
        <el-input autocomplete="off" v-model="twoForm.organization" placeholder="请输入您的从业机构" @keyup.enter.native="register('twoFormRef')"></el-input>
      </el-form-item>
    </el-form>
    
    <div class="success" v-else-if="active == 3">
      <i class="el-icon-check"></i>
      <span class="text">注册成功</span>
    </div>

    <el-button type="primary" @click="next('firstFormRef')" class="agentRegister-btns" v-no-more-click:3000 v-if="active == 1">下一步</el-button>
    <div v-else-if="active == 2" class="active2-btns">
      <el-button type="primary"  class="" v-no-more-click:3000 @click="active = 1">上一步</el-button>
      <el-button type="primary"  class="" v-no-more-click:3000 @click="register('twoFormRef')">注册</el-button>
    </div>
    <el-button v-else-if="active == 3" type="primary" @click="goLoing" class="agentRegister-btns" v-no-more-click:3000 >确认</el-button>
  </div>
</template>

<script>
import { 
  validatePhone, 
  ValidateinviteCode, 
  validateName, 
  validateCode, 
  validateEmail
} from './vaildate'
import sixCaptchaInput from '~/components/sixCaptcha-input'
export default {
  components: {
    sixCaptchaInput
  },  
  data () {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
          callback(new Error("请再次输入密码"))
      } else if (value !== this.firstForm.password) {
          callback(new Error("两次输入密码不一致!"))
      } else {
          callback()
      }
    }
    return {
      active: 1,
      firstForm: {
        phone: '',
        code: '',
        name: '',
        email: '',
        password: '',
        confirmPwd: '',
        invitation_code: '',
        nickname: '',
      },
      firstFormRules: {
        phone: [
          { required: true, validator: validatePhone, trigger: 'change' }
        ],
        // code: [
        //   { required: true, validator: validateCode, trigger: 'change' }
        // ],
        name: [
          { required: true, validator: validateName, trigger: 'change' }
        ],
        email: [
          { required: true, validator: validateEmail, trigger: 'change' }
        ],
        password: [
          {required: true, trigger: 'blur', message: '请输入密码'},
          {min: 6, message: '请填写6位及以上的密码', trigger: 'blur' }
        ],
        confirmPwd: [
          { required: true, validator: validatePass, trigger: 'change' }
        ],
        invitation_code: [
          { required: true, validator: ValidateinviteCode, trigger: 'change' }
        ],
      },
      twoForm: {
        work_limit: '',
        experience: '有',
        territory: [],
        describe: ''
      },
      twoFormRules: {
        work_limit: [{required: true, trigger: 'change', message: '请输入工作年限'}],
        experience: [{required: true, trigger: 'blur', message: '请选择是否有工作经验'}],
        describe: [{required: true, trigger: 'blur', message: '请输入工作经验描述'}],
        territory: [{required: true, trigger: 'blur', message: '请输入擅长领域'}]
      },
      VCodeText: '发送验证码',
      btnIsDisabled: false,
      has_code: false,
      territory_options: [],
      pwdType: 'text',
    }
  },
  watch:{
    firstForm: {
      handler: function (val) {
        // 解决浏览器默认填充密码框问题
        if (val.password != "" || val.confirmPwd != "") {
          this.pwdType = 'password'
        }
      },
      deep: true,
      immediate: true,
    }
  },
  created () {
    if (this.$route.query.code) {
      this.firstForm.invitation_code = this.$route.query.code
      this.has_code = true
    }
    this.getTerritory()
  },
  methods: {
    // 获取验证码
    getVCode(formName) {
      this.$refs[formName].validateField('phone', valid => {
        if(!valid) {
          if (this.btnIsDisabled) {
          } else {
            this.getVCodeRequest()
          }
        } else {
          return false
        }
      })
    },
    getVCodeRequest () {
      let that = this;
      let params = {
        phone: this.firstForm.phone,
        type: 2,
        // guard:
      }
      that.$axios.post("/api/captcha",params).then(res => {
        if (res.data.code == 200) {
          that.$message({
            message: "验证码发送成功！",
            type: "success"
          })
          let num = 60;
          that.btnIsDisabled = true;
          let timer = setInterval(function() {
            that.VCodeText = num + "秒后可重新发送";
            num -= 1;
            if (num < 0) {
              that.VCodeText = "发送验证码";
              that.btnIsDisabled = false;
              clearInterval(timer);
            }
          }, 1000);
        } else {
          if (res.data.code == 400) {
            that.$message({
              message: res.data.message,
              type: "error"
            })

          } else {
            that.$message({
              message: "验证码发送失败！",
              type: "error"
            })
          }
        }
      })
    },
    next(formName) {
      this.$refs[formName].validate((valid) => { 
        if (valid) {
          this.active ++
        } else {
          return false
        }
      })
    },
    getTerritory() {
      this.$axios.get('/api/agent/trademark_list').then(res => {
        if (res.data.code == 200) {
          let data = res.data.data
          this.territory_options = data.map(v => {
            v.label = v.name.split('-')[1]
            v.value = v.label
            return v
          })
        } else {
          this.$message({
            type: 'error',
            message: '获取擅长领域选项失败'
          })
        }
      }).catch(e => {
        console.log(e)
      })
    },
    changeSelect(val) {
      if (val == '无') {
        this.twoFormRules.describe[0].required = false
      } else {
        this.twoFormRules.describe[0].required = true
      }
    },
    register(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
            let params = Object.assign(this.firstForm, this.twoForm)
            delete params.confirmPwd
            if (params.experience == '无') {
                delete params.experience
            } else {
                params.experience = params.describe
            }
            // // 判断是不是推荐注册
            // if (this.$route.query.channel_pid) {
            //     params.channel_pid = this.$route.query.channel_pid
            // }
            params.territory = params.territory.toString()
            delete params.describe
            if (this.firstForm.invitation_code == '') {
              delete this.firstForm.invitation_code
            }
            if (this.firstForm.nickname == '') {
              delete params.nickname
            }
            this.$axios.post('/api/agent', params).then(res => {
              if (res.data.code == 200) {
                this.active ++ 
                // this.Timer = setInterval(() => {
                //   this.time_text --
                // }, 1000);
                // this.Timer2 = setInterval(() => {
                //   this.percentage = this.percentage - 3.3334
                // }, 100)
              } else {
                this.$alert(res.data.message, '提示', {
                  confirmButtonText: '确定',
                  center: true,
                  type: 'warning',
                  callback: action => {
                  }
                })
              }
            })
        } else {
          return false
        }
      })
    },
    goLoing () {
      console.log(this.firstForm.phone)
      this.$router.push({
        name: "index-login",
        params: {
          phone: this.firstForm.phone
        },
        query: {
          type: 1
        }
      })
    },
    updateCode(val) {
      this.firstForm.code = val
    }
  }
}
</script>

<style lang='less' scode>
  .agentRegister {
    width:549px;
    height:736px;
    background:rgba(255,255,255,1);
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    margin-bottom: 20px;

    .el-steps {
      width: 390px;
      margin: 30px auto 0;
      .el-step {
        .el-step__head {
          .el-step__line {
            background-color: #41aaff;
            height: 1px;
          }
          .el-step__icon.is-text {
            border: 1px solid;
          }
        }
        .is-finish {
          .el-step__line {
            background-color: #41aaff;
          }
          .el-step__icon {
            background: #249dff;
            color: #fff;
          }
        }
        .is-process {
          color: #2ba0ff;
          border-color: #2ba0ff;
          font-weight: 400;
        }
        .is-wait {
          color: #2ba0ff;
          border-color: #2ba0ff;
        
        }
      }
    }
    .el-input {
      .el-input__inner {
        padding-left: 20px;
      }

    }
    .el-select {
      width: 100%;
    }
    .el-form {
      width: 390px;
      margin: 20px auto 10px;
      .el-form-item {
        margin-bottom: 30px;
      }
    }
    .firstForm {
      .code {
        position: relative;
        .code_btns {
          position: absolute;
          right: 18px;
          bottom: 0px;
        }
      }
    }
    .success {
      width: 115px;
      height: 115px;
      margin: 205px auto 160px;
      background: #249DFF;
      border-radius: 50%;
      position: relative;
      i {
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 80px;
        color: #fff;
      }
      .text {
        position:absolute;
        bottom: -25px;
        left: 29px;
        font-size:15px;
        color:rgba(36,157,255,1);
      }
    }
    .active2-btns {
      width: 390px;
      margin: 30px auto 0;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: space-between;
      justify-content: space-between;

      .el-button {
        width: 185px;
      }
    }
    &-btns {
      width: 390px;
      margin: 30px auto 0;
      display: block;
    }
  }
</style>